

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>应收单</title>
    <link rel="stylesheet" href="../../static/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../static/style/admin.css" media="all">
</head>
<body>

<script type="text/html" id="toolbar">
    <div class="layui-inline ">
        <input type="search" name="search" lay-verify="title" autocomplete="off" placeholder="应收账单编号 "
               class="layui-input layui-input-search" id="select">
    </div>
    <button class="layui-btn layui-btn-sm layui-btn-radius" lay-event="search">
        <i class="layui-icon layui-icon-search" style="font-size: 8px; "></i> 搜索
    </button>
    <button class="layui-btn layui-btn-sm layui-btn-radius" lay-event="add">
        <i class="layui-icon layui-icon-addition" style="font-size: 8px; "></i>新增
    </button>
</script>

<!--表格-->
<div class="layui-card layui-panel-window">
    <table class="layui-hide" id="receivablespay" lay-filter="test"></table>
</div>
<!--行操作栏-->l
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs layui-btn-radius" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs layui-btn-radius" lay-event="del">删除</a>
</script>
<script src="../../../static/layui/layui.js"></script>
<script>
    layui.use(['table', 'element', 'jquery'], function () {
        table = layui.table;
        var $ = layui.$;

        table.render({
            elem: '#receivablespay',
            height: 'full-50',
            //整合到自己项目中是,您应该使用使用url参数,并且注释掉data参数,
            url: '/finance/queryReceivablesPay',
            title: '应收单表',
            contentType: 'application/json',
            method: 'post',
            page: true, //开启分页,
            // id: 'testReload',
            toolbar: '#toolbar', //开启工具栏，此处显示默认图标，可以自定义模板，详见文档,
            cols: [
                [
                    {type: 'checkbox', fixed: 'left'}
                    , {field: 'id', title: 'ID', width: 80, fixed: 'left', unresize: true, sort: true, hide: true}
                    , {field: 'receivablepayid', title: '应付账单编号', edit: 'text', align: 'center'}
                    , {field: 'supplierid', title: '收款方', edit: 'text', sort: true,align: 'center'}
                    , {field: 'createid', title: '交易方', edit: 'text', align: 'center'}
                    , {field: 'examineid', title: '审核人', edit: 'text', align: 'center'}
                    , {field: 'submitdate', title: '提交时间', edit: 'text', align: 'center'}
                    , {field: 'reviewdate', title: '审核时间', align: 'center'}
                    , {field: 'account', title: '应付金额', align: 'center'}
                    , {field: 'billid', title: '发票号',  sort: true, align: 'center'}
                    ,{field: 'status', title: '审核状态',  edit: 'text', align: 'center', templet: function (d)
                    {return d.status == '1' ? '已审核' : '未审核'}}
                    ,{field: 'billstatus', title: '发票状态', edit: 'text', align: 'center', templet: function (d)
                    {return d.billstatus == '1' ? '已付款' : '未付款'}}
                    , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 140, align: 'center'}
                ]
            ],
            size: 'lg',


        });
        //监听行工具事件
        table.on('tool(test)', function (obj) {
            //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值

            if (layEvent === 'del') {
                layer.confirm('你确定要删除吗？', {
                    btn: ['确定', '取消'] //按钮
                }, function () {
                    $.ajax({
                        url: '/finance/deleteReceivablesPay',
                        type: 'get',
                        data: 'id=' + data.id,
                        success: function (data) {
                            if (data.code === 200) {
                                // 删除成功
                                layer.msg('删除成功', {icon: 1});
                                // 表格重载
                                table.reload('receivablespay', {});
                            } else {
                                layer.msg('删除失败', {icon: 2});
                            }
                        }
                    })
                }, function () {
                    // 取消
                    layer.msg("取消删除", {icon: 7})
                });
            } else if (layEvent === 'edit') {
                //免加载页面弹窗
                Comment(data, "编辑")
            }
        });

        //触发事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            if (obj.event === 'add') {
                var tpldata = {
                    "id": "",
                    "receivablepayid": "",
                    "supplierid": "",
                    "createid": "",
                   "examineid": "",
                    "submitdate":"",
                    "reviewdate": "",
                    "account": "",
                    "billid": "",
                    "status": "",
                    "billstatus": ""
                };
                Comment(tpldata, "添加");
            }else if (obj.event === 'search') {

                // 获取到搜索框的内容
                let search = $("#select").val();
                // 表格重载
                table.reload('receivablespay', {
                    url: '/finance/queryReceivablesPay',
                    where: {
                        'queryString': search
                    }
                })
            }
        });
    });
    /**
     * 编辑和添加功能
     * @param {Object} user 用户数据
     * @param features 功能
     */
    function Comment(user, features) {
        layui.use(['layer', 'laytpl'], function () {
            var $ = layui.$;//重点处,layui有内置jquery模块
            var layer = layui.layer, laytpl = layui.laytpl;
            //给模板 tpl-user 传递参数
            var tpldata = {
                "features": features,
                "id": user.id,
                "receivablepayid": user.receivablepayid,
                "supplierid": user.supplierid,
                "createid": user.createid,
                "examineid": user.examineid,
                "submitdate":user.submitdate,
                "reviewdate": user.reviewdate,
                "account": user.account,
                "billid": user.billid,
                "status": user.status,
                "billstatus": user.billstatus

            };
            //获取id为tpl-user的noscript标签的html内容,不能使用innerHtml
            laytpl(document.getElementById('tpl-user').innerText)
                .render(tpldata, function (html) {
                    //渲染完成后直接打开
                    layer.open({
                        type: 1,
                        shade: false,
                        area: ['70%','60%'],
                        title: false, //不显示标题
                        content: html
                    });
                });
        });
    }

</script>
</body>
<noscript id="tpl-user">
    <!-- style 尽量不要影响到页面其他元素,使用#userinfo范围限定 -->
    <style type="text/css">
        #userinfo .layui-form-label.layui-required:after {
            content: "*";
            color: red;
            position: absolute;
            top: 10px;
            right: 5px;
        }
    </style>
    <div class="layui-card" id="userinfo">
        <div class="layui-card-header">{{d.features}}</div>
        <div class="layui-card-body">
            <form class="layui-form" action="" lay-filter="info">
                <div class="layui-form-item">
                    <label class="layui-form-label layui-required">应收账单编号</label>
                    <div class="layui-input-block">
                        <input type="text" name="receivablepayid" lay-verify="required" lay-reqtext="应收账单编号是必填项"
                               placeholder="请输入应收账单编号"
                               autocomplete="off" value="{{d.receivablepayid}}" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label layui-required">收款方</label>
                    <div class="layui-input-block">
                        <input type="text" name="supplierid" lay-verify="required" lay-reqtext="付款方是必填项"
                               placeholder="请输入付款方"
                               autocomplete="off" value="{{d.supplierid}}" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label layui-required">交易方</label>
                    <div class="layui-input-block">
                        <input type="text" name="createid" lay-verify="required" lay-reqtext="交易方是必填项"
                               placeholder="请输入交易方"
                               autocomplete="off" value="{{d.createid}}" class="layui-input">
                    </div>
                </div>

<!--                <div class="layui-form-item">-->
<!--                    <label class="layui-form-label layui-required">审核人</label>-->
<!--                    <div class="layui-input-block">-->
<!--                        <input type="text" name="examineid" lay-verify="required" lay-reqtext="审核人是必填项"-->
<!--                               placeholder="请输入审核人"-->
<!--                               autocomplete="off" value="{{d.examineid}}" class="layui-input">-->
<!--                    </div>-->
<!--                </div>-->

                <div class="layui-form-item">
                    <label class="layui-form-label layui-required">提交时间</label>
                    <div class="layui-input-block">
                        <input type="text" name="submitDate" lay-verify="required" lay-reqtext="提交时间是必填项"
                               placeholder="请输入提交时间"
                               autocomplete="off" value="{{d.submitdate}}" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label layui-required">审核时间</label>
                    <div class="layui-input-block">
                        <input type="text" name="reviewDate" lay-verify="required" lay-reqtext="审核时间是必填项"
                               placeholder="请输入审核时间"
                               autocomplete="off" value="{{d.reviewdate}}"  class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label layui-required">应付金额</label>
                    <div class="layui-input-block">
                        <input type="text" name="account" lay-verify="required" lay-reqtext="应收金额是必填项"
                               placeholder="请输入应收金额"
                               autocomplete="off" value="{{d.account}}" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label layui-required">发票号</label>
                    <div class="layui-input-block">
                        <input type="text" name="billid" lay-verify="required" lay-reqtext="发票号是必填项"
                               placeholder="请输入发票号"
                               autocomplete="off" value="{{d.billid}}" class="layui-input">
                    </div>
                </div>

<!--                <div class="layui-form-item">-->
<!--                    <label class="layui-form-label layui-required">状态</label>-->
<!--                    <div class="layui-input-block">-->
<!--                        <input type="text" name="status" lay-verify="required" lay-reqtext="状态是必填项"-->
<!--                               placeholder="请输入状态"-->
<!--                               autocomplete="off" value="{{d.status}}" class="layui-input">-->
<!--                    </div>-->
<!--                </div>-->

                <div class="layui-form-item">
                    <label class="layui-form-label layui-required">发票状态</label>
                    <div class="layui-input-block">
                        <select name="billstatus" lay-event="" lay-verify="required" lay-search>
                            <option value="0">未付款</option>
                            <option value="1">已付款</option>
                        </select>
<!--                        <input type="text" name="billstatus" lay-verify="required" lay-reqtext="发票状态是必填项"-->
<!--                               placeholder="请输入发票状态"-->
<!--                               autocomplete="off" value="{{d.billstatus}}" class="layui-input">-->
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="submit" class="layui-btn tt layui-btn-radius " lay-submit="" lay-filter="demo1" >
                            立即提交
                        </button>
                        <button type="submit" class="layui-btn tt layui-btn-radius " lay-submit="" lay-filter="examine">
                            审核
                        </button>
                        <button type="submit" class="layui-btn tt layui-btn-radius " lay-submit="" lay-filter="unexamine">
                            弃审
                        </button>
                        <button type="reset" class="layui-btn layui-btn-primary layui-btn-radius">重置</button>
                    </div>
                </div>
            </form>

            <script>
                layui.use(['jquery', 'form' ], function () {
                    var $ = layui.$;
                    var form = layui.form, layer = layui.layer, laydate = layui.laydate;


                    form.verify({
                        contentRule: function (value) {
                            if (value.length < 5) {
                                return '至少得5个字符啊';
                            }
                        }
                    });
                    form.on('submit(demo1)', function (data) {
                        /* layer.alert(JSON.stringify(data.field), {
                             title: '用户id为:{{d.user_id}}的提交信息'
                         });
                         /**可以在ajax 地址中,传入user_id参数*/
                        if ("{{d.features}}" === "添加") {
                            console.log("添加");
                            $.ajax({
                                url: '/finance/addReceivablesPay',
                                type: 'POST',
                                dataType: 'json',
                                contentType: 'application/json;charset=UTF-8',
                                data: JSON.stringify(data.field),
                                success: function (data) {
                                    console.log(data);
                                    if (data.code === 200) {
                                        layer.msg("添加成功", {icon: 1})
                                    } else {
                                        layer.msg("添加失败", {icon: 2})
                                    }
                                    layer.closeAll();
                                }
                            });
                        }else {
                            data.field['id'] = "{{d.id}}";
                            console.log(data.field);
                            $.ajax({
                                url: '/finance/editReceivablesPay',
                                type: 'POST',
                                dataType: 'json',
                                contentType: 'application/json;charset=UTF-8',
                                data: JSON.stringify(data.field),
                                success: function (data) {
                                    console.log(data);
                                    if (data.code === 200) {
                                        layer.msg("编辑成功", {icon: 1})
                                    } else {
                                        layer.msg("编辑失败", {icon: 2})
                                    }
                                    layer.closeAll();
                                }
                            });
                        }
                    });
                    form.on('submit(examine)', function (data) {
                        /* layer.alert(JSON.stringify(data.field), {
                             title: '用户id为:{{d.user_id}}的提交信息'
                         });
                         /**可以在ajax 地址中,传入user_id参数*/
                        data.field['id'] = "{{d.id}}";
                        console.log(data.field);
                        $.ajax({
                            url: '/finance/exBuyorderDetail',
                            type: 'POST',
                            dataType: 'json',
                            contentType: 'application/json;charset=UTF-8',
                            data: JSON.stringify(data.field),
                            success: function (data) {
                                console.log(data);
                                if (data.code === 200) {
                                    layer.msg("审核成功", {icon: 1})
                                } else {
                                    layer.msg("审核失败", {icon: 2})
                                }
                                layer.closeAll();
                            }
                        });
                    });
                    form.on('submit(unexamine)', function (data) {
                        /* layer.alert(JSON.stringify(data.field), {
                             title: '用户id为:{{d.user_id}}的提交信息'
                         });
                         /**可以在ajax 地址中,传入user_id参数*/
                        data.field['id'] = "{{d.id}}";
                        console.log(data.field);
                        $.ajax({
                            url: '/finance/unexBuyorderDetail',
                            type: 'POST',
                            dataType: 'json',
                            contentType: 'application/json;charset=UTF-8',
                            data: JSON.stringify(data.field),
                            success: function (data) {
                                console.log(data);
                                if (data.code === 200) {
                                    layer.msg("弃审成功", {icon: 1})
                                } else {
                                    layer.msg("弃审失败", {icon: 2})
                                }
                                layer.closeAll();
                            }
                        });
                    });
                    /** 要使用render,复杂表单才能显示 */
                    form.render();
                });
            </script>
        </div>
    </div>
</noscript>
</html>
